import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import HomeNews from '../pages/HomeNews'
import HomeMessage from '../pages/HomeMessage'
import MessageDetail from '../pages/MessageDetail'

//应用路由器插件
Vue.use(VueRouter)

//创建并暴露路由器
export default new VueRouter({
	mode:'history', //路由器的工作模式，有两种，分别是：hash和history
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			children:[
				{
					name:'xinwen',
					path:'news',
					component:HomeNews,
				},
				{
					name:'xiaoxi',
					path:'message',
					component:HomeMessage,
					children:[
						/* ************************ */
						{
							name:'xiangqing',
							path:'detail',
							component:MessageDetail,
							//第一种写法，props的值为对象，对象中的key-value就作为传给组件的props
							// props:{a:1}

							//第二种写法，props的值为布尔值，将路由组件收到的所有params参数，全部作为props传给路由组件
							// props:true

							//第三种写法，props的值为函数，要求函数必须有返回值，可以靠他完成给路由组件传递query参数
							props(currentRouteObj){
								return {...currentRouteObj.query,x:99}
							}

						}
						/* ********************** */
					]
				},
			]
		}
	]
})